<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一定要按照这个顺序来 引入JS文件 -->
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
    <script src="../JS/babel.min.js"></script>
    
    <div id="test"></div>



    <script type="text/babel">
        // const data = ['阿尔托莉雅','女','24']
        // const VDOM = (
        //     <div>
        //         <p>我多么想拥抱你</p>
        //         <p>可是时光之里山南水北</p>
        //         <p>你我之间人潮似海</p>
        //         <p>当我们回看感情经历的时候</p>
        //         <p>常常因为没有读档键而后悔</p>
        //         <p>但真让我们回到我们想要的那一刻</p>
        //         <p>结局是不是就能不一样呢</p>
        //         <p>也许没有结局的结束是命运的仁慈</p>
        //         <p>因为我们会因为没有结局而幻想结局的美好</p>
        //         <p>总算保留一份希望</p>
        //         <p>当我们真的经历了设想的路径走到写着结局的尽头</p>
        //         <p>发现只剩下不堪的零落</p>
        //         <p>那是不是连希望也没有了</p>
        //         <ul>
        //             {
        //                 data.map((i,index)=>{
        //                     return <li key={index}>{i}</li>
        //                 })
        //             } 
        //         </ul>
        //     </div>
            
        // )
        // ReactDOM.render(VDOM,document.getElementById('test'))
        // 函数式组件
        //
        



        //1.创建虚拟DOM
        const VDOM = <h1>hello,React</h1> // 此处一定不要写引号 因为不是字符串 虚拟DOM  1.创建虚拟DOM
        ReactDOM.render(VDOM,document.getElementById('test'))





        // function demo(){
        //     return <h1>这里是首页</h1>
        // }
        // ReactDOM.render(demo(),document.getElementById('test'))
    </script>
</body>
</html>